<template>
  <div id="container">
    <el-row>
      <el-col :span="24">
        <el-card shadow="always" class="title">
          模板管理/积分到期消息
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span class="title">消息内容</span>
          </div>
          <div class="body">
            <!-- 基础表单 -->
            <el-form label-width="80px" label-position="right">
              <el-form-item label="模板名称">
                <span style="margin-left:200px">积分到期消息</span>
              </el-form-item>
              <el-form-item label="发送用户">
                <span style="margin-left:200px">{{
                  serviceForm.configData.userType === 'STUDENT'
                    ? '学员'
                    : '顾问'
                }}</span>
              </el-form-item>

              <el-form-item label="发送时间">
                <span style="margin-left:200px">
                  <span style="margin-right:33px;">发送当天</span>
                  <el-time-picker
                    v-model="sendTime"
                    value-format="HH:mm"
                    format="HH:mm"
                    @change="changeSendtime"
                    placeholder="时：分"
                    :disabled="edit"
                  >
                  </el-time-picker>
                </span>
              </el-form-item>

              <el-form-item label="发送条件">
                <span style="margin-left:200px;margin-right:20px;"
                  >积分到期前</span
                >
                <el-input-number
                  v-model="dynamicValidateForm.day"
                  controls-position="right"
                  placeholder="1-30天内"
                  :min="1"
                  :max="30"
                  :disabled="edit"
                  @blur="blurHandle"
                >
                </el-input-number>
                <span style="margin-left:10px;">天</span>
              </el-form-item>

              <el-form-item
                v-for="(day, index) in dynamicValidateForm.days"
                :key="day.key"
                :prop="'days.' + index + '.value'"
              >
                <el-input-number
                  v-model="day.value"
                  controls-position="right"
                  :min="1"
                  :max="30"
                  style="margin-left:290px;margin-right:10px;"
                  :disabled="edit"
                  @blur="blurHandle"
                >
                </el-input-number>
                <span style="margin-right:10px;">天</span>
                <el-button
                  type="danger"
                  :disabled="edit"
                  round
                  @click.prevent="removeDays(day)"
                  >删除</el-button
                >
              </el-form-item>

              <el-form-item>
                <el-button
                  v-if="dynamicValidateForm.days.length < 2"
                  type="primary"
                  :disabled="edit"
                  @click="addDays"
                  style="margin-left:305px;"
                  >新增天数</el-button
                >
              </el-form-item>
            </el-form>
            <!-- 站内信 -->
            <el-form
              ref="noticeform"
              :model="noticeObj"
              label-width="80px"
              :rules="noticeRules"
            >
              <el-form-item label="发送渠道" prop="noticeCheck" ref="noticeRef">
                <el-checkbox
                  v-model="noticeChecked"
                  :checked="noticeChecked"
                  @change="noticeClick"
                  :disabled="edit"
                  style="margin-left:200px"
                  >站内信</el-checkbox
                >
              </el-form-item>

              <el-form-item
                label="标签说明"
                label-width="150px"
                style="margin-left:200px"
              >
                <span>到期积分：$expire Integral$（注：最多占用7字）</span>
              </el-form-item>

              <el-card class="box-card" style="width:70%;margin-left:280px">
                <div slot="header" class="clearfix" style="font-size:18px">
                  <span>编辑内容</span>
                </div>
                <el-form-item prop="noticeTitle">
                  <el-input
                    type="text"
                    maxlength="32"
                    placeholder="请输入通知标题"
                    show-word-limit
                    v-model.trim="noticeObj.title"
                    :disabled="edit"
                  ></el-input>
                </el-form-item>

                <el-form-item prop="noticeContent">
                  <el-input
                    v-model.trim="noticeObj.content"
                    type="textarea"
                    rows="5"
                    :disabled="edit"
                    placeholder="请输入通知内容"
                    style="margin-top:10px"
                  >
                  </el-input>
                </el-form-item>

                <el-form-item style="display:flex;justify-content: flex-end;">
                  <span style="color:#909399;">注：最多输入300字</span>
                </el-form-item>
              </el-card>
            </el-form>
            <!-- 短信 -->
            <el-form
              ref="smsform"
              :model="smsObj"
              label-width="80px"
              :rules="smsRules"
              style="margin-top:30px"
            >
              <el-form-item prop="smsCheck" ref="smsRef">
                <el-checkbox
                  v-model="smsChecked"
                  :checked="smsChecked"
                  @change="smsClick"
                  :disabled="edit"
                  style="margin-left:200px"
                  >短信</el-checkbox
                >
              </el-form-item>

              <el-form-item>
                <div style="margin-left:200px; color:red;">
                  注意：短信是收费项目，请谨慎选择！
                </div>
              </el-form-item>

              <el-form-item
                label="标签说明"
                label-width="150px"
                style="margin-left:200px"
              >
                <span>到期积分：$expire Integral$ （注：最多占用7字）</span>
              </el-form-item>

              <el-card class="box-card" style="width:70%;margin-left:280px">
                <div slot="header" class="clearfix" style="font-size:18px">
                  <span>编辑内容</span>
                </div>

                <el-form-item prop="smsContent">
                  <el-input
                    style="margin-top:10px"
                    type="textarea"
                    placeholder="请输入通知内容"
                    rows="5"
                    v-model.trim="smsObj.content"
                    :disabled="edit"
                  >
                  </el-input>
                </el-form-item>

                <el-form-item style="display:flex;justify-content: flex-end;">
                  <span style="color:#909399;">注：最多输入195字</span>
                </el-form-item>

                <el-form-item label="短链">
                  <el-input
                    v-model="smsObj.link"
                    placeholder="输入短链"
                    style="width:90%"
                    :disabled="edit"
                  ></el-input>
                  <el-button class="chain" :disabled="edit" @click="convertLink"
                    >转链并插入</el-button
                  >
                </el-form-item>
              </el-card>
            </el-form>
            <!-- 推送 -->
            <el-form
              ref="pushform"
              :model="pushObj"
              label-width="80px"
              :rules="pushRules"
              style="margin-top:30px"
            >
              <el-form-item prop="pushCheck" ref="pushRef">
                <el-checkbox
                  style="margin-left:200px"
                  :disabled="edit"
                  v-model="pushChecked"
                  :checked="pushChecked"
                  @change="pushClick"
                  >推送</el-checkbox
                >
              </el-form-item>

              <el-form-item>
                <div style="margin-left:200px; color:red;">
                  注意：短信是收费项目，请谨慎选择！
                </div>
              </el-form-item>

              <el-form-item
                label="标签说明"
                label-width="150px"
                style="margin-left:200px"
              >
                <span>到期积分：$expire Integral$（注：最多占用7字）</span>
              </el-form-item>

              <el-card class="box-card" style="width:70%;margin-left:280px">
                <div slot="header" class="clearfix" style="font-size:18px">
                  <span>编辑内容</span>
                </div>

                <el-form-item prop="pushTitle">
                  <el-input
                    type="text"
                    maxlength="30"
                    placeholder="请输入通知标题"
                    show-word-limit
                    v-model.trim="pushObj.title"
                    :disabled="edit"
                  ></el-input>
                </el-form-item>

                <el-form-item prop="pushContent">
                  <el-input
                    style="margin-top:10px"
                    type="textarea"
                    placeholder="请输入通知内容"
                    rows="5"
                    v-model.trim="pushObj.content"
                    :disabled="edit"
                  >
                  </el-input>
                </el-form-item>

                <el-form-item style="display:flex;justify-content: flex-end;">
                  <span style="color:#909399;">注：最多输入128字</span>
                </el-form-item>
              </el-card>

              <el-row style="margin-top:20px;">
                <el-col :span="5" :offset="4">
                  <el-form-item label="后续动作">
                    <el-select
                      v-model="pushObj.pushType"
                      @change="changePushEvent"
                      placeholder="请选择"
                      :disabled="edit"
                      style="width:300px"
                    >
                      <el-option label="启动应用" value="OPEN_APP"
                        >启动应用</el-option
                      >
                      <el-option label="打开第三方链接" value="THIRD_LINK"
                        >打开第三方链接</el-option
                      >
                      <el-option
                        label="跳转应用内特定页面"
                        value="OPEN_APP_LINK"
                        >跳转应用内特定页面</el-option
                      >
                      <el-option label="跳转到小程序" value="OPEN_WECHAT_APPLET"
                        >跳转到小程序</el-option
                      >
                    </el-select>
                  </el-form-item>
                </el-col>

                <el-col v-if="pushObj.pushType === 'OPEN_APP_LINK'" :span="5">
                  <el-form-item>
                    <el-select
                      v-model="pushObj.appJumpPage"
                      placeholder="请选择跳转页面"
                      :disabled="edit"
                      style="width:300px"
                    >
                      <el-option
                        v-for="item in appJumpOption"
                        :key="item.dictLabel"
                        :label="item.dictValue"
                        :value="item.dictLabel"
                        >{{ item.dictValue }}</el-option
                      >
                    </el-select>
                  </el-form-item>
                </el-col>

                <el-col v-if="pushObj.pushType === 'OPEN_APP_LINK'" :span="8">
                  <el-form-item>
                    <el-input
                      v-model.trim="pushObj.link"
                      placeholder="请输入页面地址"
                      :disabled="edit"
                      style="width:80%;"
                    >
                    </el-input>
                  </el-form-item>
                </el-col>

                <el-col
                  v-if="pushObj.pushType === 'OPEN_WECHAT_APPLET'"
                  :span="8"
                >
                  <el-form-item>
                    <el-input
                      v-model.trim="pushObj.link"
                      placeholder="请输入小程序ID"
                      :disabled="edit"
                      style="width:80%;"
                    >
                    </el-input>
                  </el-form-item>
                </el-col>

                <el-col
                  v-if="pushObj.pushType === 'THIRD_LINK'"
                  :span="13"
                  :offset="1"
                >
                  <el-form-item prop="pushLink">
                    <el-input
                      v-model.trim="pushObj.link"
                      placeholder="请输入跳转链接"
                      :disabled="edit"
                      style="width:80%;"
                    >
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
          <!-- 操作按钮 -->
          <div
            style="width:100%;display:flex;justify-content:center;padding:30px"
          >
            <div style="width:30%;display:flex;justify-content:space-around;">
              <el-button
                type="success"
                style="padding:10px 30px"
                @click="close"
                :disabled="edit"
                >取消</el-button
              >
              <el-button
                type="success"
                style="padding:10px 30px"
                @click="save"
                :disabled="edit"
                >保存</el-button
              >
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { clearTagMixins } from '@/mixins/clearTag.js'
import { sysNormalDisable } from '@utils/dictionariesFunc'
import { systemTaskDetails, compileSystemTask, turnChain } from '@/api/notice'
export default {
  mixins: [clearTagMixins],
  data() {
    // 校验站内信渠道
    var validateNoticeChannels = (rule, value, callback) => {
      if (this.smsChecked || this.noticeChecked || this.pushChecked) {
        callback()
      } else {
        callback(new Error('请选择渠道'))
      }
    }
    // 站内信标题验证
    var noticeTitleValidate = (rule, value, callback) => {
      if (this.noticeChecked && this.noticeObj.title === '') {
        callback(new Error('请输入通知标题'))
      } else {
        callback()
      }
    }
    // 站内信内容验证
    var noticeContentValidate = (rule, value, callback) => {
      if (this.noticeChecked && this.noticeObj.content == '') {
        callback(new Error('请输入通知内容'))
      } else {
        callback()
      }
    }

    // 校验短信渠道
    var validateSmsChannels = (rule, value, callback) => {
      if (this.smsChecked || this.noticeChecked || this.pushChecked) {
        callback()
      } else {
        callback(new Error('请选择渠道'))
      }
    }
    // 短信内容验证
    var smsContentValidate = (rule, value, callback) => {
      if (this.smsChecked && this.smsObj.content == '') {
        callback(new Error('请输入通知内容'))
      } else {
        callback()
      }
    }

    // 校验推送渠道
    var validatePushChannels = (rule, value, callback) => {
      if (this.smsChecked || this.noticeChecked || this.pushChecked) {
        callback()
      } else {
        callback(new Error('请选择渠道'))
      }
    }
    // 推送标题
    var pushTitleValidate = (rule, value, callback) => {
      if (this.pushChecked && this.pushObj.title == '') {
        callback(new Error('请填写推送标题'))
      } else {
        callback()
      }
    }
    // 推送内容
    var pushContentValidate = (rule, value, callback) => {
      if (this.pushChecked && this.pushObj.content == '') {
        callback(new Error('请填写推送内容'))
      } else {
        callback()
      }
    }
    // 推送链接
    var pushLiknValidate = (rule, value, callback) => {
      if (
        this.pushChecked &&
        this.pushObj.pushType === 'THIRD_LINK' &&
        this.pushObj.link === ''
      ) {
        callback(new Error('请填写推送link'))
      } else {
        callback()
      }
    }
    return {
      // 站内信对象
      noticeObj: {
        title: '',
        content: '',
        link: '',
        type: 'NOTICE'
      },
      // 站内新规则
      noticeRules: {
        noticeCheck: [
          {
            required: true,
            validator: validateNoticeChannels,
            trigger: 'change'
          }
        ],
        noticeTitle: [
          { required: true, validator: noticeTitleValidate, trigger: 'blur' },
          { min: 1, max: 32, message: '标题最长32个字符', trigger: 'change' }
        ],
        noticeContent: [
          { required: true, validator: noticeContentValidate, trigger: 'blur' }
        ]
      },
      // 短信
      smsObj: {
        content: '',
        link: '',
        type: 'SMS'
      },
      // 短信规则
      smsRules: {
        smsCheck: [
          { required: true, validator: validateSmsChannels, trigger: 'change' }
        ],
        smsContent: [
          { required: true, validator: smsContentValidate, trigger: 'blur' }
        ]
      },
      // 推送相关
      appJumpOption: [{ dictLabel: '请选择跳转页面', dictValue: '' }],
      // 推送
      pushObj: {
        title: '',
        content: '',
        pushType: 'OPEN_APP',
        link: '',
        type: 'PUSH',
        appJumpPage: null
      },
      // 推送规则
      pushRules: {
        pushCheck: [
          { required: true, validator: validatePushChannels, trigger: 'change' }
        ],
        pushTitle: [
          { required: true, validator: pushTitleValidate, trigger: 'blur' }
        ],
        pushContent: [
          { required: true, validator: pushContentValidate, trigger: 'blur' }
        ],
        pushLink: [
          { required: true, validator: pushLiknValidate, trigger: 'blur' }
        ]
      },
      edit: false,
      smsChecked: false,
      noticeChecked: false,
      pushChecked: false,
      // 发送时间
      sendTime: '',
      // 优惠券到期时间
      dynamicValidateForm: {
        day: '', // 默认展示一个
        days: [] // 动态天数
      },
      serviceForm: {
        configData: {
          sendTimeType: '---',
          sendingCondition: '',
          sendingConditionDesc: '---',
          userType: '---',
          sendingCouponExpirationCondition: { days: [] },
          sendingTimeConfig: { hour: 0, minute: 0 }
        },
        messageChannels: [],
        messageTemplateAlias: 'POINTS_EXPIRATION_MESSAGE_TEMPLATE',
        name: '---'
      }
    }
  },
  created() {
    if (this.$route.query.edit === true) {
      this.edit = true
    } else {
      this.edit = false
    }
  },
  async mounted() {
    const id = this.$route.query.id
    let data = await sysNormalDisable('app_jump_page')
    this.appJumpOption = this.appJumpOption.concat(data)
    systemTaskDetails(
      id,
      {},
      (res) => {
        this.serviceForm.name = res.name
        this.serviceForm.configData = res.configData
        const time = res.configData.sendingTimeConfig
        this.sendTime = time.hour + ':' + time.minute

        const days = res.configData.sendingCouponExpirationCondition.days
        // 获取第一个天数
        this.dynamicValidateForm.day = days[0]
        // 重新生成一个新数组
        const arr = days.slice(1)
        let newarr = []
        for (let i = 0; i < arr.length; i++) {
          newarr.push({ value: arr[i], key: Date.now() + i })
        }
        this.dynamicValidateForm.days = newarr
        this.messageChannelsToChannelsList(res.messageChannels)
      },
      (err) => {}
    )
  },
  methods: {
    // 返回
    close() {
      this.clearTag()
    },
    // 保存
    save() {
      let checked = true
      let smsValid = true
      let noticeValid = true
      let pushValid = true
      let pushLink = true
      if (!this.smsChecked && !this.noticeChecked && !this.pushChecked) {
        this.$refs['smsform'].validateField('smsCheck', (errMsg) => {})
        this.$refs['noticeform'].validateField('noticeCheck', (errMsg) => {})
        this.$refs['pushform'].validateField('pushCheck', (errMsg) => {})
        checked = false
      } else {
        if (this.noticeChecked) {
          this.$refs['noticeform'].validate((errMsg) => {
            noticeValid = errMsg
          })
        }

        if (this.smsChecked) {
          this.$refs['smsform'].validate((errMsg) => {
            smsValid = errMsg
          })
        }

        if (this.pushChecked) {
          this.$refs['pushform'].validate((errMsg) => {
            pushValid = errMsg
          })
        }

        if (
          this.pushChecked &&
          this.pushObj.pushType === 'THIRD_LINK' &&
          this.pushObj.link !== ''
        ) {
          const patt = /(http|https):\/\/([\w.]+\/?)\S*/
          if (!patt.test(this.pushObj.link)) {
            this.$message({
              message: '推送后续动作为打开第三方链接，链接不合法，请检查后重试',
              type: 'warn'
            })
            pushLink = false
          }
        }
      }

      if (checked && smsValid && noticeValid && pushValid && pushLink) {
        this.channelsListToMessageChannels()
        this.serviceForm.configData.sendingTimeConfig.hour = this.sendTime.split(
          ':'
        )[0]
        this.serviceForm.configData.sendingTimeConfig.minute = this.sendTime.split(
          ':'
        )[1]
        this.serviceForm.configData.sendingCouponExpirationCondition.days = []
        this.serviceForm.configData.sendingCouponExpirationCondition.days.push(
          this.dynamicValidateForm.day
        )
        for (let i = 0; i < this.dynamicValidateForm.days.length; i++) {
          this.serviceForm.configData.sendingCouponExpirationCondition.days.push(
            this.dynamicValidateForm.days[i].value
          )
        }

        let id = this.$route.query.id
        let params = Object.assign({}, this.serviceForm)
        compileSystemTask(
          id,
          params,
          (res) => {
            this.$message({ message: '编辑成功', type: 'success' })
            this.serviceForm.messageChannels = []
            this.clearTag()
          },
          (err) => {
            this.$message({ message: err.message, type: 'warn' })
            this.serviceForm.messageChannels = []
          }
        )
      }
    },

    async changePushEvent(val) {
      if (val === 'OPEN_APP_LINK') {
        this.pushObj.link = ''
        this.pushObj.appJumpPage = null
        this.appJumpOption = []
        let data = await sysNormalDisable('app_jump_page')
        this.appJumpOption = this.appJumpOption.concat(data)
      } else {
        this.pushObj.link = ''
        this.appJumpOption = []
      }
    },
    // 选中站内信
    noticeClick(val) {
      this.noticeChecked = val
      if (this.noticeChecked || this.smsChecked || this.pushChecked) {
        this.$refs['smsRef'].resetField()
        this.$refs['noticeRef'].resetField()
        this.$refs['pushRef'].resetField()
        if (this.noticeChecked) {
          this.$refs['noticeform'].validateField('noticeTitle', (errMsg) => {})
          this.$refs['noticeform'].validateField(
            'noticeContent',
            (errMsg) => {}
          )
        } else {
          this.$refs['noticeform'].resetFields()
        }
      } else {
        this.$refs['noticeform'].resetFields()
        this.$refs['noticeform'].validateField('noticeCheck', (errMsg) => {})
        this.$refs['smsform'].validateField('smsCheck', (errMsg) => {})
        this.$refs['pushform'].validateField('pushCheck', (errMsg) => {})
      }
    },
    // 短信
    smsClick(val) {
      this.smsChecked = val
      if (this.smsChecked || this.noticeChecked || this.pushChecked) {
        this.$refs['smsRef'].resetField()
        this.$refs['noticeRef'].resetField()
        this.$refs['pushRef'].resetField()
        if (this.smsChecked) {
          this.$refs['smsform'].validateField('smsContent', (errMsg) => {})
        } else {
          this.$refs['smsform'].resetFields()
        }
      } else {
        this.$refs['smsform'].resetFields()
        this.$refs['smsform'].validateField('smsCheck', (errMsg) => {})
        this.$refs['noticeform'].validateField('noticeCheck', (errMsg) => {})
        this.$refs['pushform'].validateField('pushCheck', (errMsg) => {})
      }
    },
    // 推送
    pushClick(val) {
      this.pushChecked = val
      if (this.smsChecked || this.noticeChecked || this.pushChecked) {
        this.$refs['smsRef'].resetField()
        this.$refs['noticeRef'].resetField()
        this.$refs['pushRef'].resetField()
        if (this.pushChecked) {
          this.$refs['pushform'].validateField('pushTitle', (errMsg) => {})
          this.$refs['pushform'].validateField('pushContent', (errMsg) => {})
        } else {
          this.$refs['pushform'].resetFields()
        }
      } else {
        this.$refs['pushform'].resetFields()
        this.$refs['smsform'].validateField('smsCheck', (errMsg) => {})
        this.$refs['noticeform'].validateField('noticeCheck', (errMsg) => {})
        this.$refs['pushform'].validateField('pushCheck', (errMsg) => {})
      }
    },
    // 长链转短链
    convertLink() {
      const patt = /(http|https):\/\/([\w.]+\/?)\S*/
      if (!patt.test(this.smsObj.link)) {
        this.$message({ message: '请检查要转换的URL', type: 'warn' })
        return false
      }

      turnChain(
        { longURL: this.smsObj.link },
        (res) => {
          if (this.smsObj.content.length + ` ${res.shortURL} `.length > 195) {
            this.$message({
              message: '短信编辑内容字数不能超过195',
              type: 'warn'
            })
            return false
          }
          this.smsObj.content = this.smsObj.content + ` ${res.shortURL} `
          this.smsObj.link = ''
        },
        (err) => {
          this.$message({
            message: '转链失败，请检查URL后重试',
            type: 'warn'
          })
        }
      )
    },
    // 选择渠道对象转换为传参数组
    channelsListToMessageChannels() {
      let messageChannels = []
      switch (this.serviceForm.configData.userType) {
        // 通知用户类型=>顾问
        case 'CONSULTANT':
          break
        // 通知用户类型=>学员
        case 'STUDENT':
          if (this.noticeChecked) {
            messageChannels.push(this.noticeObj)
          }
          if (this.smsChecked) {
            messageChannels.push(this.smsObj)
          }
          if (this.pushChecked) {
            messageChannels.push(this.pushObj)
          }
          break
      }
      this.serviceForm.messageChannels = messageChannels
    },
    // 选择渠道数组转换为选择渠道对象
    messageChannelsToChannelsList(obj) {
      obj.forEach((item) => {
        switch (item.type) {
          case 'NOTICE':
            this.noticeChecked = true
            this.noticeObj = item
            break
          case 'SMS':
            this.smsChecked = true
            this.smsObj = item
            break
          case 'PUSH':
            this.pushChecked = true
            this.pushObj = item
            break
        }
      })
    },

    // 改变发送时间
    changeSendtime(val) {
      this.sendTime = val
    },

    // 天数失去焦点
    blurHandle() {
      let num = this.dynamicValidateForm.day
      if (String(num).indexOf('.') !== -1) {
        this.dynamicValidateForm.day = parseInt(num)
      }

      this.dynamicValidateForm.days.forEach((ele) => {
        if (String(ele.value).indexOf('.') !== -1) {
          ele.value = parseInt(ele.value)
        }
      })
    },

    // 新增天数
    addDays() {
      if (this.dynamicValidateForm.days.length < 2) {
        this.dynamicValidateForm.days.push({
          value: '',
          key: Date.now()
        })
      }
    },
    // 删除天数
    removeDays(item) {
      var index = this.dynamicValidateForm.days.indexOf(item)
      if (index !== -1) {
        this.dynamicValidateForm.days.splice(index, 1)
      }
    }
  }
}
</script>

<style lang="less" scoped>
:deep(.el-form-item__error) {
  margin-left: 200px;
}
:deep(.el-form .el-card__body .el-form-item__error) {
  margin-left: 0px !important;
}
.bor_one {
  border: 1px solid black;
}
.row_around {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
#container {
  .chain {
    background: rgba(29, 200, 164, 1);
    color: white;
    height: 40px;
  }
  .redTitle {
    color: red;
  }
  .title {
    color: rgb(51, 51, 51);
    font-size: 20px;
    font-weight: 700;
    font-style: normal;
  }
  .body {
    font-size: 100px !important;
  }
}
</style>
